<template>
  <div class="set_password">
    <div class="password_title">安全设置</div>
    <a-form-model ref="ruleForm" :model="form" :rules="rules">
      <a-form-model-item has-feedback label="原密码" prop="oldPassword">
        <a-input-password v-model.trim="form.oldPassword" />
      </a-form-model-item>
      <a-form-model-item has-feedback label="新密码" prop="newPassword">
        <a-input-password v-model.trim="form.newPassword" />
      </a-form-model-item>
      <a-form-model-item has-feedback label="确认密码" prop="newPassword2">
        <a-input-password v-model.trim="form.newPassword2" />
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="onSavePassword" :loading="loginBtn">
          确认修改
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { baseMixin } from '@/store/app-mixin'
  export default {
    data() {
      let pass1 = '',
          pass2 = ''
      let validatePass = (rule, value, callback) => {
        pass1 = value
        if (value.indexOf(' ') != -1) {
          callback('密码中不能包含空格')
        } else {
          callback()
        }
      }

      let validatePass2 = (rule, value, callback) => {
        pass2 = value
        if (value.indexOf(' ') != -1) {
          callback('密码中不能包含空格')
        } else if (value != pass1) {
          callback('两次密码输入不一致')
        }else{
          callback()
        }
      }
      let validateOldPass = (rule, value, callback) => {
        if (value.indexOf(' ') != -1) {
          callback('密码中不能包含空格')
        } else {
          callback()
        }
      }
      return {
        form: {},
        loginBtn:false,
        rules: {
          oldPassword: [
            { required: true, message: '请输入原密码', trigger: 'blur' },
            { max: 50, min: 8, message: '密码长度为8-50位', trigger: 'blur' },
            { validator: validateOldPass, trigger: 'blur' },
            { pattern: '^.*(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*?])', message: '密码必须包含数字、大小写字母和特殊符号', trigger: 'blur' }
          ],
          newPassword: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { max: 50, min: 8, message: '密码长度为8-50位', trigger: 'blur' },
            { validator: validatePass, trigger: 'blur' },
            { pattern: '^.*(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*?])', message: '密码必须包含数字、大小写字母和特殊符号', trigger: 'blur' },
          ],
          newPassword2: [
            { required: true, message: '请再次输入密码', trigger: 'blur' },
            { max: 50, min: 8, message: '密码长度为8-50位', trigger: 'blur' },
            { validator: validatePass2, trigger: 'blur' },
            { pattern: '^.*(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*?])', message: '密码必须包含数字、大小写字母和特殊符号', trigger: 'blur' },
          ]
        },
      }
    },
    methods: {
      onSavePassword () {
        const form = {...this.form}
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            delete form.newPassword2
            this.loginBtn = true
            this.$store.dispatch( 'UpdateUserPassword', { id: this.$store.getters.userInfo.id, ...form } )
              .then((res) => {
                this.SuccessHint(res)
                this.form = {}
              })
              .catch(err => {
                this.FailedHint(err)
                this.form = {}
              })
              .finally(() => {
                this.loginBtn = false
              })
          } else {
            setTimeout(()=>{
              this.form.loadingBtn = false
              this.form.statusBtn = false
              return false
            }, 1500)
          }
        });
      },
      SuccessHint (res) {
        setTimeout(() => {
          this.$notification.success({
            message: '提示',
            description: res.msg
          })
        }, 1000)
      },
      FailedHint (err) {
        this.$notification['error']({
          message: '错误',
          description: err.msg || '请求出现错误，请稍后再试',
          duration: 4
        })
      }
    }
  }
</script>

<style scoped>
.set_password {
  max-width: 1000px;
}

.set_password>>>.ant-page-header-heading-sub-title{
  font-size: 18px;
  font-weight: bold;
}

.item_form{
  display: flex;
  margin-bottom: 25px;
}

.item_form label{
  width: 100px;
  align-self: center;
  text-align: right;
}

.user_input{
  width: 400px;
}

.info_button{
  margin-left: 50px;
}

.ant-form-item{
  display: flex;
}

.set_password>>>.ant-form-item-control-wrapper{
  flex: 1;
}

.set_password>>>.ant-form-horizontal{
  padding: 0 10px;
  margin-top: 20px;
}

.set_password>>>.ant-form-item-label{
  width: 80px;
}

.password_title{
  font-size: 24px;
  line-height: 70px;
}
</style>